<template >
  <div>
    <!-- 搜索按钮 -->
    <div  class="search">
      <div class="search-button" @click="toScarch">
        <van-icon name="search" />
        搜索商品，共127002款好物
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="main">
      <!-- 左侧导航栏 -->
      <div class="main-right">
         <div class="item-nav" :class="{active:correntid === item.id}" v-for="item in usrClassify.categoryL1List" :key="item.id" @click="changeButton(item.id)"> {{ item.name }}</div>
      </div>
      <!-- 右侧图片展示 -->
   
      <Content :correntid="correntid"></Content>


      

    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from "vue"
import { useRouter} from 'vue-router'


// 导入内容组件
import Content from './components/content/index.vue'
// 导入store
import {usrClassifyInfo} from '@/stores/classify'
const usrClassify = usrClassifyInfo()
const router = useRouter()

// // 搜索界面
const toScarch = () =>{
  router.push('/search')
}
// 排他法，显示高亮效果
const correntid = ref(11)
// 发送请求
const changeButton = (id:number)=>{
  correntid.value = id
  usrClassify.getClassifyListInfo(id)

}
// 挂载是渲染数据
onMounted(()=>{
  usrClassify.getClassifyList()
})
</script>

<style lang="less" scoped>
/* 搜索框 */
.search{
  position: fixed!important;
    left: 0;
    top: 0;
    z-index: 5;
    width: 100%;
    background-color: #fff;
    border-bottom:1px solid #ededed ;
}
.search-button{
  width: 92%;
  height: 28px;
  margin:8px 15px;
  background: #ededed;
  color:#666666 ;
  border: none;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px ;
  position: relative;
  z-index: 2;
}

/* 左侧导航栏 */
.main{
  display: flex;
  margin-top: 50px;
}
.main-right{
  padding:5px 0;
  display: flex;
  flex-direction: column;
  width: 80px;
  border-right: 1px solid #ededed;
  position: fixed!important;
  left: 0;
  z-index: 5;
  background-color: #fff;
}
.main-right .item-nav{
  // box-sizing:border-box;
  margin: 10px 0;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.active{
  border-left: 4px solid #ab2b2b;
}
/* 右侧展示区 */
// .main-left{
//   padding: 15px 15px;
//   flex: 1;
//   margin-left: 80px;
// }
// .main-left .left-image img{
//   width: 100%;
//   height: 96px;
// }
// /* 右下展示区
//  */
//  .left-body .body-header{
//   margin: 15px 0;
//   border-bottom:  1px solid #ccc;
//  }
//  .left-body .body-header p{
//   font-size: 14px;
//   font-weight:bolder;
//   padding-bottom: 5px;
//  }

// .left-body .body-content{
//   display: flex;
//   flex-wrap:wrap;
// }

// .left-body .body-content .content{
//   display: flex;
//   flex-direction: column;
//   margin:4px;
//   width: 30%; 
// }
// .left-body .body-content .content img{
//   margin:0 auto;
//   width: 80%;
  
// }
// .left-body .body-content .content p{
//   text-align: center;
//   // line-height: 30px;
//   margin-bottom: 30px;
// }
</style>
